<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usb Login</title>
<style>

    source {
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
    }

    .dialog {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .dialog-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 50px;
        border-radius: 5px;
    }

    .dialog button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
    }

    video {
        object-fit:cover;
        position: fixed;
        right: 0px;
        bottom: 0px;
        min-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        background-size: cover;
        /*加滤镜*/
        /* filter: blur(15px); //背景模糊设置 */
        /*-webkit-filter: grayscale(100%);*/
        /*filter:grayscale(100%); //背景灰度设置*/
        z-index: -11;
    }


    .login{width: 600px;
        height: 500px;

        margin:20px auto;
        overflow:hidden;

    }

    .login_logo{
        margin:20px auto;
        background:rgb(214, 18, 126);
        color: #f1f1f1;
        width: 100px;
        height: 100px;
        text-align:center;
        line-height:100px;
        font-size:28px;
        box-shadow:0 5px 18px #b1b1b1;
        animation:myshadow 5s linear infinite;
        opacity: 0.5;


    }

    @keyframes myshadow{
        0%{box-shadow:0 5px 18px #b1b1b1;}
        50%{box-shadow:0 5px 26px rgb(11, 127, 35);}
        100%{box-shadow:0 5px 18px #b1b1b1;}
    }

    .login_form>h2{
        color:rgb(214, 18, 126);
        margin:5px 0;
    }

    .login_form>p{
        color:rgb(214, 18, 126);
        font-size:13px;
    }

    .login_form>input{
        display:block;

    }

    #number,#password{
        margin:20px 0 10px;
        height: 40px;
        width: 98%;
        border: 0;
        /* border-bottom: 1px solid #ccc; */
        padding:0 1%;
        opacity: 0.5;

    }

    .login_btn{
        background:#0ee60e;
        height: 50px;
        width: 50%;
        border: 0;
        font-size:20px;
        color:#f1f1f1;
        margin: 10px auto;
        cursor:pointer;
        opacity: 0.5;

    }
</style>

<video src="0.mp4" autoplay  loop ></video>
<div class="login">
    <h1 class="login_logo">韵剪</h1>
    <form action="http://localhost:8080/login/check" method="post" name="login">
        <div class="login_form">
            <h2>后台管理</h2>
            <p>Enter your phone number</p>
            <input type="text" placeholder="number" name="number" id="number">
            <input type="password" placeholder="password" name="password" id="password">
            <input type="submit" value="Login" class="login_btn">
        </div>

    </form>
</div>
<div id="msg" class="dialog">
    <div class="dialog-content">
        <h2 id="h0"></h2>
        <p>Please recheck your phone and password</p>
        <button onclick="hideCustomDialog()">关闭</button>
    </div>
</div>
<script>

    // 登录校验，
    document.querySelector('form[name="login"]').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取输入的电话号码和密码
        var number = document.getElementById("number").value;
        var password = document.getElementById("password").value;
        console.log(number)
        console.log(password)
        // 发送请求到后端API接口，进行登录校验
        fetch('http://localhost:8085/login/check', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                "Access-Control-Allow-Origin": "*"
            },
            body: JSON.stringify({ number, password }),
        })
            .then(response => response.json()) // 解析返回的JSON数据
            .then(data => {
                console.log(data)
                if (data.success) {
                    console.log(data.employees)
                    var employeesJSON = JSON.stringify(data.employees);
                    // 登录成功，重定向到首页或其他目标页面
                    sessionStorage.setItem('employees',employeesJSON);
                    document.location.href = "index.html";
                } else {
                    // 登录失败，显示错误消息
                    document.getElementById("msg").style.display = "block";
                    document.getElementById('h0').innerHTML = "登录失败";
                }
            })
            .catch((error) => {
                console.error('Error:', error); // 打印错误信息以进行调试
            });
    });

    function hideCustomDialog() {
        document.getElementById("msg").style.display = "none";
    }
</script>
